import React from 'react';
import MyProcess from './MyProcess';
import style from './style.okr';
import Priority from './Priority';
import moment from 'moment'
import util from "../../../util";


class TeamOkr extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'TeamOkr';
    }
    /**
     * 图表中心字段
     * @return {[type]} [description]
     */
    getLabel = (day) => {
        const {
            okrs = {},
        } = this.props;
        return (
            <div className={style['label-box']}>
                <div className={style['label-process']}>{Math.round(okrs.totalProgress * 100)}</div>
                <div className={style['label-day']}>剩余{day.toFixed(0)}天</div>
            </div>
        );
    }
    render() {
        const {
            okrs = {},
        } = this.props;
        const {
            objectiveVOList = [],
            beginTimestamp,
            endTimestamp,
            thumbup = [],
        } = okrs;
        let now = new Date().getTime();
        if(endTimestamp < now) now = endTimestamp;
        if(beginTimestamp > now) now = beginTimestamp;
        const allDays = moment.duration(endTimestamp - beginTimestamp).asDays();
        const nowDays = moment.duration(now - beginTimestamp).asDays();
        const fields = [
            { value: 1, start: .6, end: .7, duration: 0, fill: '#f4f5f8',},
            { value: +okrs.totalProgress, start: .6, end: .75, duration: 1500, fill: `#${+okrs.totalProgress < .6 ? +okrs.totalProgress === 0 ? 'f4f5f8' : 'f9ea94' : '7fd7af'}`, text: '进度'},
            { value: +(nowDays/allDays).toFixed(2), start: .53, end: .6, duration: 1500, fill: '#d2d5dd', text: '时间'},
        ];
        return (
            <div className={style['okr-layout']}>
                <MyProcess label={this.getLabel(allDays-nowDays)} fields={fields}/>
                <div className={style['okr-area']} >
                    {
                        objectiveVOList.slice(0,3).map((v, i) => {
                            const {
                                lastModifiedTime
                            } = v;
                            return (
                                <div className={style['okr-item']} key={i}>
                                    <div style={{width: '290px'}}  className={style['okr-title']}>
                                        <div style={{width: '280px'}}  className={style['ell']}><a  style={{width: '280px'}} onClick={()=>{this.props.toOkr(null,v.objectiveId)}}>{v.content}</a></div>
                                    </div>
                                    <div style={{width: '40px'}}>
                                        <Priority label value={v.priority}/>
                                    </div>
                                    <div style={{width: '30px'}} className={style['okr-process']}>
                                        <MyProcess width={30} height={30} fields={
                                            [
                                                { value: 1, start: .5, end: .65, duration: 0, fill: '#f4f5f8',},
                                                {
                                                    value: +v.progress,
                                                    start: .5,
                                                    end: .65,
                                                    duration: 800,
                                                    fill: '#6ebcfd'
                                                },
                                            ]
                                        }/>
                                    </div>
                                    <div style={{width: '33px'}} className={style['okr-process-text']}>{`${Math.round(v.progress*100)}%`}</div>
                                    <div className={style["kr-like"]} >
                                        <img style={{width:"15px",height:"15px"}} className={style["kr-like-icon"]} src={`${util.getImagePath()}/default/kr-like.png`} alt=""/>
                                        <span>{thumbup[i] != null ? thumbup[i].total : 0}</span>
                                    </div>
                                    {thumbup[i] ? <div
                                        className={style["kr-like"] + " " + style[thumbup[i].isThumpBup == 0 ? "kr-islike" : "kr-notlike"]}
                                    >
                                        <img className={style["kr-like-icon"]}
                                             src={`${util.getImagePath()}/default/kr-like.png`} alt=""/>
                                        <img className={style["kr-islike-icon"]}
                                             src={`${util.getImagePath()}/default/kr-islike.png`} alt=""/>
                                        <span>{thumbup[i] != null ? thumbup[i].total : 0}</span>
                                    </div> : null}
                                    <div style={{width: '85px'}} className={style['okr-info']}>
                                        <div style={{width: '85px'}} className={style['ell']}>
                                            {moment(lastModifiedTime).fromNow()}更新
                                        </div>
                                    </div>
                                </div>
                            );
                        })
                    }
                </div>
            </div>
        );
    }
}

export default TeamOkr;
